<template>
  <div class="bottom_container">
    <div class="item_box_left">
      <img src="../../assets/img/nav/a1.png"
           @click="fun1()" />
      <div class="detial_box">
        <el-link class="title">
          <p>找对象</p>
        </el-link>
        <div class="hr_box"></div>
        <div class="detail">
          <p>
            它们不懂幸福，却能读懂你笑的音符；它们不懂忧伤，却能倾听你内心的痛。它们用无言的守护，带给你最美的幸福。
            好好对它们吧，虽然只是我们的宠物，但也需要我们的爱护。
          </p>
        </div>
      </div>
    </div>

    <div class="item_box_right">
      <div class="detial_box">
        <el-link class="title">
          <p>爱心领养</p>
        </el-link>
        <div class="hr_box"></div>
        <div class="detail">
          <p>
            它们不懂幸福，却能读懂你笑的音符；它们不懂忧伤，却能倾听你内心的痛。它们用无言的守护，带给你最美的幸福。
            好好对它们吧，虽然只是我们的宠物，但也需要我们的爱护。
          </p>
        </div>
      </div>
      <img src="../../assets/img/nav/a2.png" />
    </div>

    <div class="item_box_left">
      <img src="../../assets/img/nav/a3.png" />
      <div class="detial_box">
        <el-link class="title">
          <p>我要领养</p>
        </el-link>
        <div class="hr_box"></div>
        <div class="detail">
          <p>
            它们不懂幸福，却能读懂你笑的音符；它们不懂忧伤，却能倾听你内心的痛。它们用无言的守护，带给你最美的幸福。
            好好对它们吧，虽然只是我们的宠物，但也需要我们的爱护。
          </p>
        </div>
      </div>
    </div>

    <div class="item_box_right">
      <div class="detial_box">
        <el-link class="title">
          <p>丢失找寻</p>
        </el-link>
        <div class="hr_box"></div>
        <div class="detail">
          <p>
            它们不懂幸福，却能读懂你笑的音符；它们不懂忧伤，却能倾听你内心的痛。它们用无言的守护，带给你最美的幸福。
            好好对它们吧，虽然只是我们的宠物，但也需要我们的爱护。
          </p>
        </div>
      </div>
      <img src="../../assets/img/nav/a4.png" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    todata: {}
  },
  created () {
    //  console.log(this.data)
  },
  methods: {
    fun1 () {
      console.log(this.todata)
    }
  }
}
</script>
<style lang="less" scoped>
.bottom_container {
  margin-top: 20px;
  //   图片在左边的div
  .item_box_left {
    display: flex;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 20px;
  }
  //   图片在右边的div
  .item_box_right {
    display: flex;
    margin-right: 200px;
    margin-left: 200px;
    margin-top: 20px;
  }
  //   详情外壳div
  .detial_box {
    width: 100%;
    height: 200px;
    padding-left: 40px;
    padding-right: 40px;
    //  标题
    .title {
      width: 100%;
      height: 20%;
      text-align: center;
      p {
        margin: 0;
        color: violet;
        padding-top: 7px;
        font-size: 20px;
        font-weight: bold;
      }
    }
    //  分割线
    .hr_box {
      height: 1%;
      width: 100%;
      background-color: rgba(49, 49, 49, 0.473);
    }
    //  详情内容div
    .detail {
      width: 100%;
      height: 79%;
      padding: 0;
      p {
        font-size: 15px;
        color: rgba(238, 130, 238, 0.74);
      }
    }
  }
}
</style>